<template>
  <div class="goods">
    <Breadcrumb :params1="'商品管理'" :params2="'添加商品'"></Breadcrumb>
    <el-card class="box-card">
      <el-alert title="添加商品信息" type="info" center show-icon> </el-alert>
      <el-steps :active="+activeName" finish-status="success">
        <el-step title="基本信息"></el-step>
        <el-step title="商品参数"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>

      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
        tab-position="left"
        :before-leave="beforeleave"
      >
        <el-tab-pane label="基本信息" name="0">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            class="demo-ruleForm"
          >
            <el-form-item label="商品名称" prop="goods_name">
              <br />
              <el-input v-model="ruleForm.goods_name"></el-input>
            </el-form-item>
            <el-form-item label="商品价格" prop="goods_price">
              <br />
              <el-input v-model="ruleForm.goods_price"></el-input>
            </el-form-item>
            <el-form-item label="商品重量" prop="goods_weight">
              <br />
              <el-input v-model="ruleForm.goods_weight"></el-input>
            </el-form-item>
            <el-form-item label="商品数量" prop="goods_number">
              <br />
              <el-input v-model="ruleForm.goods_number"></el-input>
            </el-form-item>
            <el-form-item label="商品分类" prop="goods_cat">
              <br />
              <el-cascader
                v-model="ruleForm.goods_cat"
                :options="options"
                :props="props"
                @change="handleChange"
              ></el-cascader>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="商品参数" name="1">
          <div v-for="(item, index) in calssList" :key="index">
            <p>{{ item.attr_name }}</p>
            <el-tag
              v-for="(item1, index1) in item.attr_vals"
              :key="index1"
              effect="plain"
            >
              {{ item1 == '' ? '暂无数据' : item1 }}
            </el-tag>
          </div>
        </el-tab-pane>
        <el-tab-pane label="商品属性" name="2">
          <div v-for="(item, index) in calssList2" :key="index">
            <p>{{ item.attr_name }}</p>
            <el-input v-model="item.attr_vals"></el-input>
          </div>
        </el-tab-pane>
        <el-tab-pane label="商品图片" name="3">
          <el-upload
            class="upload-demo"
            action="http://klxin.cn:8888/api/private/v1/upload"
            :headers="headers"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            :on-success="imgSuccess"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-tab-pane>
        <el-tab-pane label="商品内容" name="4">
          <div class="edit_container">
            <quill-editor
              v-model="ruleForm.goods_introduce"
              ref="myQuillEditor"
            >
            </quill-editor>
          </div>
          <el-button @click="addGoods">添加商品</el-button>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <img :src="imgURL" alt="" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>

import _ from 'lodash'

import { goodscategories_api, dynamic_api, goodsAdd_api } from '@/api/index'

import { quillEditor } from 'vue-quill-editor' //调用编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  components: {
    quillEditor,
  },
  data() {
    return {
      inpValue: '',
      content: ``,
      editorOption: {},

      activeName: '0',
      attr_sel: '',
      ruleForm: {
        goods_name: '',
        goods_price: '',
        goods_weight: '',
        goods_number: '',
        goods_cat: [],
        pics: [],
        goods_introduce: '',
        attrs: []
      },
      rules: {
        goods_name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ],
        goods_price: [
          { required: true, message: '请输入商品价格', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ],
       goods_weight: [
          { required: true, message: '请输入商品重量', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ],
        goods_number: [
          { required: true, message: '请输入商品数量', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ],
        goods_cat: [
          { required: true, message: '请选择商品分类', trigger: 'blur' },
           { min: 3, max: 3, message: '长度在 3 到 5 个字符', trigger: 'blur' }
         ],
      },
      value: '',
      options: [],
      props: {
        label: 'cat_name',
        value: 'cat_id',
        children: 'children',
        expandTrigger: 'hover',
      },
      params: {
        pagenum: 1,
        pagesize: 10,
      },
      calssList: [],
      calssList2: [],
      sel: '',
      fileList : [],
      dialogVisible: false,
      imgURL: '',
      headers: {
        Authorization: window.sessionStorage.getItem('token'),
      },
     
    }

  },
  methods: {
    handleClick() {},

    async getCategories() {
      var { data: res } = await goodscategories_api(this.params)

      var classList = res.data.result
      // console.log(res.data.result);
      this.options = classList
    },
    handleChange(value) {
      //  console.log(value);

    },

    async getClasslist() {
      var { data: res } = await dynamic_api({
        id: this.cateid,
        sel: this.sel,
      })
      
      console.log(res.data)

      if (this.activeName == '1') {
        res.data.forEach((item) => {
          item.attr_vals = item.attr_vals.split(' ')
           this.ruleForm.attrs.push({
          attr_id: item.attr_id,
          attr_vals: item.attr_vals.join(' ')
        })
        })
        this.calssList = res.data
      } else if (this.activeName == '2') {
        this.calssList2 = res.data
      }
    },

    beforeleave(a, b) {
      if (this.cateid) {
        if (a == 1) {
          this.sel = 'many'
          this.getClasslist()

        }
        if (a == 2) {
          this.sel = 'only'
          this.getClasslist()
        }
        return true
      } else {
        return false
      }
    },
    handleRemove(file, fileList) {
      // console.log(fileList)
     var  newArry = []


     fileList.forEach(item => {
        newArr.push({ pic: item.response.data.tmp_path })
      })

      this.ruleForm.pics = newArr

    },
    handlePreview(file) {
      this.dialogVisible = true
      //  console.log(file)
      this.imgURL = file.url
    },
    imgSuccess(response, file, fileList) {
      this.$notify({
        title: '成功',
        message: '图片上传成功',
        type: 'success',
      })

      // console.log(response)
       this.ruleForm.pics.push({'pic': response.data.tmp_path})
     
    },
   async addGoods(){
      console.log(this.ruleForm);


      var deepForm = _.cloneDeep(this.ruleForm)

      deepForm.goods_cat = deepForm.goods_cat.join(',')
      console.log(deepForm);

       const { data: res } = await goodsAdd_api(deepForm)
      console.log(res, 9988)
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
  },
  computed: {
    cateid() {
      if (this.ruleForm.goods_cat.length == 3) {
        return this.ruleForm.goods_cat[2]
      } else {
        return false
      }
    },
  },
  created() {
    this.getCategories()
  },
}
</script>

<style  scope lang="less">
.box-card {
  width: 95%;
  margin: 0 auto;

  .el-alert {
    margin: 20px 0;
  }
  .el-steps {
    width: 90%;
    margin: 0 auto;
  }
  .el-tabs {
    margin: 20px;
  }
  .el-tag {
    margin: 10px;
  }
  p {
    margin: 10px;
  }
  .edit_container{
    height: 300px;
  }
}
</style>


